DHTML and XML

Combining DHTML and XML, you can create highly sophisticated web applications that are network efficient and more in line with the expectations of most users as far as the user interface is concerned.  We are going to look at our last XML example and modify it so that instead of creating a single static page of text we have a dynamic page that updates itself based on user selection.  

If you will recall, in our previous example we used an XML Data Island to generate the contents of an HTML page while it was been loaded within the browser window.  The result looked like this:

File: Chapter 8\EmployeeDataIsland1.htm in IE5.

Once the contents of the page has been generated, the user is presented with a static representation of the data.  If the user wanted to drill down further on one of the employees, it would require another request from the server.  

While this is not a bad page, and in fact can be quite useful, it wouldn’t be much help if the list of employees was long.  The screen would become quite cluttered with information that the user may not need.  Instead, wouldn’t it be nice to be able to select just one employee and view their information?  Wouldn’t it be even nicer if the user did not have to wait for repeated trips to the server?  Let’s use DHTML to accomplish this goal.  

DHTML and XML Data Islands

Before we look at source code, let’s review the completed example.

File: Chapter 8\EmployeeDataIsland2.htm (selecting an employee from the drop down list box to view).

The first point to note about this example is that instead of presenting the user with all of the employees and their respective information, we are presenting the user with a drop down list box to select just the employee that they want to view.

This reduces the amount of wasted screen space and makes for a cleaner user interface.  Also, the user can look at just the information that they are interested in.  

Let’s continue by selecting “John Doe” from the list and clicking on the “Go get it!” button.

File: Chapter 8\EmployeeDataIsland2.htm (selected John Doe from pick list).

After clicking on the “Go get it!” button, the screen (document) was visually updated so that the information about John Doe is displayed.  Notice that a trip to the server was not required.  Instead, everything happened locally and within the browser.

Let’s look at the source code and see how this works.  First, let’s look at our XML data island.  You will see that it is exactly the same as the one included in our static example.

<XML ID=employees>
<employees>
    <employee>
        <name>
            <first>John</first>
            <last>Doe</last>
        </name>
        <position>Programmer</position>
        <phone>
            <main>(714) 555-1000</main>
        </phone>
    </employee>
    <employee>
        <name>
            <first>Jane</first>
            <last>Doe</last>
        </name>
        <position>Systems Analyst</position>
        <phone>
            <main>(714) 555-2000</main>
        </phone>
    </employee>
</employees>
</XML>

File: Chapter 8\EmployeeDataIsland2.htm.

Now, let’s look at the code that populates the drop down list box.  It should look pretty familiar to you by now.

<H2>Select an employee</H2>
<SELECT id=select1 name=select1>
<SCRIPT LANGUAGE=javascript>
<!--
	var xmlRoot = employees.documentElement;
	var intTotal = xmlRoot.childNodes.length;
	var xmlEmp;
	var intCount;
	
	for ( intCount = 0;
		  intCount < intTotal;
		  intCount++ )
	{
		xmlEmp = xmlRoot.childNodes.item( intCount );
		document.write( "<OPTION>" );
		document.write( xmlEmp.childNodes.item(0).text );
		document.write( "</OPTION>" );
	}
//-->
</SCRIPT>
</SELECT>

File: Chapter 8\EmployeeDataIsland2.htm.

Here, we just populate a drop down list box as denoted by the <SELECT> and </SELECT> tags with the first and last name of each employee identified within the XML data island.

Next, let’s look at the text areas within the document that we are going to dynamically update based on the user’s selection.

<TABLE WIDTH=100%>
	<TR><TD WIDTH=10%><B>Position:</B>
	<TD><SPAN ID=position></SPAN>
	<TR><TD><B>Phone:</B>
	<TD><SPAN ID=phone></SPAN>
</TABLE>

File: Chapter 8\EmployeeDataIsland2.htm.

Here we have created a table (note the <TABLE> and </TABLE> tags) to format the information that will be displayed.  Then we create Position and Phone labels.  Finally, notice the two <SPAN> objects that we define named “position” and “phone” respectively.  These two <SPAN> tags do not contain any data.  In other words, there is not text between the <SPAN> and </SPAN> tags.  This area is where we are going to dynamically change the contents of the document based on the user selection.  These two <SPAN> objects are now accessible using client-side JavaScript.

To see how we manipulate these two objects, let’s look at the JavaScript which is attached to the “Go get it!” button.

<SCRIPT LANGUAGE=javascript>
<!--
var xmlDoc;

function button1_onclick() 
{
	var xmlEmp = 
		employees.documentElement.childNodes.item( 
		select1.selectedIndex );

	var xmlPos = xmlEmp.childNodes.item( 1 );
	var xmlPhone = xmlEmp.childNodes.item( 2 );

	position.innerText = xmlPos.text;
	phone.innerText = xmlPhone.childNodes.item(0).text;
}
//-->
</SCRIPT>

File: Chapter 8\EmployeeDataIsland2.htm.

Notice the last two lines in the button1_onclick() method.  They directly manipulate the contents of the position and phone objects by setting their innerText properties with the appropriate content from the XML data island named “employees”.

The result is that when the user selects and employee from the list and clicks the “Go get it!” button, the selected employee’s information is retrieved from the XML data island (position and phone number) and is displayed in the appropriate <SPAN> objects.  The result is that the document updates itself without having to make a round-trip to retrieve the information.

Advantages 

The advantages to this approach are many.  First, you can create highly interactive web pages that do not need to make repeated trips to the server for more information.  Using XML Data Island’s, you can embed the needed information within the document, thus removing the need to get more based on user selection.  This increases performance in that no further network traffic is generated from round-trips to the server.  Second, the user experience is more in line with standard GUI interfaces like Microsoft Windows.  If designed properly, users will feel more comfortable with the site because it behaves similar to other applications that they are already familiar with (e.g. Microsoft Office, etc.).

Disadvantages

As for disadvantages, there is the obvious one of being tied exclusively to IE.  While this may be fine for an Intranet or even Extranet environment, using DHTML to attract a global audience is probably not a good idea.  As for using XML Data Islands, once the document is loaded, the data is static.  If the data island was generated from a database on the server, any changes to the data will not be reflected in the embedded data island.  For that, we can use the XML Document Object Model (DOM).

DHTML and XML DOM

While XML Data Islands are great, embedding the XML data within the HTML document is not always preferable.  A good example of why you might not want to do this is when you have data that is being changed on the back-end.  While you can refresh the entire page and update the embedded data island on the server, the user experience will suffer.  A better choice might be using the XML DOM.  Let’s look at our completed example.  Notice that it looks exactly like our previous example visually, but internally it works very different.

File: Chapter 8\EmployeeDOM.htm

The first thing that we are going to look at is the XML source.  This time, instead of using an embedded block of XML data, we are requesting a full XML document from the server.  For our example, we are going to use the same fully validated XML document that we have been using in previous lessons.

<?xml version="1.0"?>
<!DOCTYPE employees [
	<!ELEMENT employees ( employee+ )>

	<!ELEMENT employee (name, position, address, phone)>
	<!ATTLIST employee id ID #REQUIRED>

	<!ELEMENT name (first, last)>
	<!ELEMENT first (#PCDATA)>
	<!ELEMENT last  (#PCDATA)>

	<!ELEMENT position (#PCDATA)>

	<!ELEMENT address (street?, city?, state?, zip?)>
	<!ELEMENT street (#PCDATA)>
	<!ELEMENT city   (#PCDATA)>
	<!ELEMENT state  (#PCDATA)>
	<!ELEMENT zip    (#PCDATA)>

	<!ELEMENT phone (main,office*,fax*,mobile*,home*)>
	<!ELEMENT main   (#PCDATA)>
	<!ELEMENT office (#PCDATA)>
	<!ELEMENT fax    (#PCDATA)>
	<!ELEMENT mobile (#PCDATA)>
	<!ELEMENT home   (#PCDATA)>
]>

<employees>
    <employee id="A1234">
        <name>
            <first>John</first>
            <last>Doe</last>
        </name>
        <position>Programmer</position>
        <address>
            <street>123 Main Street</street>
            <city>Anywhere</city>
            <state>CA</state>
            <zip>92000</zip>
        </address>
        <phone>
            <main>(714) 555-1000</main>
            <fax>(714) 555-1001</fax>
        </phone>
    </employee>

    <employee id="A2345">
        <name>
            <first>Jane</first>
            <last>Doe</last>
        </name>
        <position>Systems Analyst</position>
        <address>
        </address>
        <phone>
            <main>(714) 555-2000</main>
            <mobile>(949) 555-2200</mobile>
            <home>(949) 555-2220</home>
        </phone>
    </employee>
</employees>

File: Chapter 8\EmployeesWithDTD.xml

The HTML document contains client-side JavaScript, which requests this document from the server, which in turn populates the XML DOM with the data content of the XML document.  This data is used to populate the drop down list box (i.e. <SELECT> and </SELECT> block).

<H2>Select an employee</H2>
<SELECT id=select1 name=select1>
<SCRIPT LANGUAGE=javascript>
<!--
	xmlDoc = new ActiveXObject( "microsoft.xmldom" );
	xmlDoc.load( "EmployeesWithDTD.xml" );	

	var xmlRoot = xmlDoc.documentElement;
	var intTotal = xmlRoot.childNodes.length;
	var xmlEmp;
	var intCount;
	
	for ( intCount = 0;
		  intCount < intTotal;
		  intCount++ )
	{
		xmlEmp = xmlRoot.childNodes.item( intCount );
		document.write( "<OPTION>" );
		document.write( xmlEmp.childNodes.item( 0 ).text );
		document.write( "</OPTION>" );
	}
//-->
</SCRIPT>
</SELECT>

File: Chapter 8\EmployeeDOM.htm

Notice how we have to instantiate the XML DOM object using the ActiveXObject() function.  Then we load the document into the object using it’s load() method.  From that, we iterate through the object and populate the contents of the drop down list box.

Next, let’s look at our DHTML <SPAN> declarations.  Notice that they are identical to those in our previous example.

<TABLE WIDTH=100%>
	<TR><TD WIDTH=10%><B>Position:</B>
	<TD><SPAN ID=position></SPAN>
	<TR><TD><B>Phone:</B>
	<TD><SPAN ID=phone></SPAN>
</TABLE>

File: Chapter 8\EmployeeDOM.htm

Finally, let’s look at the code that updates the screen based on the user’s selection.

<SCRIPT LANGUAGE=javascript>
<!--
var xmlDoc;

function button1_onclick() 
{
	var xmlEmp = 
		xmlDoc.documentElement.childNodes.item( 
		select1.selectedIndex );

	var xmlPos = xmlEmp.childNodes.item( 1 );
	var xmlPhone = xmlEmp.childNodes.item( 3 );

	position.innerText = xmlPos.text;
	phone.innerText = xmlPhone.childNodes.item(0).text;
}
//-->
</SCRIPT>

File: Chapter 8\EmployeeDOM.htm

Notice that we use the XML DOM the same way whether we are using an XML Data Island or a fully validated XML document.

Advantages

Using the XML DOM and a fully validated XML document has many advantages over the XML Data Island approach.  The biggest is that we can reload the XML document as necessary.  This is useful if we need to refresh based on updates to the document on the server.  Periodic refreshing will pick up any changes that anyone else has made to the content of the document.

Another advantage is that you are working with an XML document.  This document can (and really should) include a DTD to fully validate it.  Remember, XML Data Islands do not contain validated XML.  It can only adhere to the rules of well-formedness.  By working with validated XML documents, you can share this information between multiple applications.  It is  not constrained to the page that contains the embedded XML.

Disadvantages

Requesting the document requires another round-trip to the server.  Each refresh also requires another round-trip.  The upside is that the user doesn’t see the refresh, so it isn’t as bad.  Performance is often in the eye of the beholder, so if the user perceives that they are not waiting, then they are happy.  This requires a little forethought.  Downloading large amounts of information (i.e. large documents) is going to cause a degradation in performance whether you are using XML Data Islands or XML documents, so you have to plan around the performance hit anyway.